<div fxLayout="column" class="fullscreen employee-container">
    <header class="app-header noshrink">
        <div class="margin-l">
            <img class="header-logo" src="{{store.merchant.logo?store.merchant.logo:'./assets/images/LOGO.png'}}">
        </div>
        <span class="margin-l-xs">{{store ? store.merchant.storeName : ""}}</span>
    </header>
    <div fxLayout="column" fxFlex="100%">
        <div fxLayout="column" class="padding" fxFlex="50%">
            <span class="text-l">{{title}}</span>
            <div *ngIf="lastUserName && lastUserName.length" class="employee-icon v-gap noshrink color-white text-s" fxLayout="row" fxLayoutAlign="center center">
                <span>{{lastUserName}}</span>
            </div>
            <md-input-container class="pct100 text-s v-gap">
                <input mdInput placeholder="输入手机号或者员工号" [(ngModel)]="username" class="pct80" (keyup)="pressTarget($event)">
                <span class="i-keyboard-arrow-down fl-right text-s margin-l-xxs" [ngClass]="{'rotate-arrow':showUserList}" (click)="toggleUserList()" *ngIf="rememberList.length>0"></span>
                <span class="i-close fl-right margin-r-s" (click)="closeUser()" *ngIf="username.length>0"></span>
            </md-input-container>
            <div class="list-container" [ngClass]="{'hideself':showUserList==false || rememberList.length==0}">
                <md-list class="user-list pct100">
                    <md-list-item *ngFor="let item of rememberList">
                        <div class="pct100" (click)="toggleUser(item)">{{item.username}}</div>
                        <span class="i-close" (click)="removeItem(item)"></span>
                    </md-list-item>
                </md-list>
            </div>
            <md-input-container class="pct100 text-s">
                <input type="password" mdInput placeholder="密码" [(ngModel)]="password" class="pct80">
                <span class="i-keyboard-arrow-down fl-right color-white text-s margin-l-xxs" *ngIf="rememberList.length>0"></span>
                <span class="i-close fl-right margin-r-s" (click)="closePassword()" *ngIf="password.length>0"></span>
            </md-input-container>
            <md-checkbox class="text-s" [(ngModel)]="checked" [disableRipple]="true">
                记住密码
            </md-checkbox>
        </div>
        <div class="padding" fxLayout="column" fxFlex="50%">
            <button class="pct100 bgcolor-primary content-btn color-white v-gap" md-button (click)="login()">登录</button>
            <div fxLayout="column" class="v-gap text-s">
                <span>如何设置店员账号？</span>
                <span class="color-lightgray v-gap">店长或者店铺管理员可在【店铺管理-设置-员工管理】中管理员工账号</span>
            </div>
        </div>
    </div>
    <div class="toggle-mask" (click)="showUserList=false" [ngClass]="{'hideself':showUserList==false}"></div>
</div>

